<template>
	<view>
		<!-- #ifdef H5 -->
		<view style="position: fixed;top: 44px;z-index: 1;width: 100%;background-color: #fff;display: flex;align-items: center;">
		<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="position: fixed;top: 0;z-index: 1;width: 100%;background-color: #fff;display: flex;align-items: center;">
			<!-- #endif -->
				<uni-search-bar placeholder="请输入标题查询" v-model="queryParam.title" @confirm="search" radius="5"
					cancelButton="none" @clear="search" style="flex: 1;"></uni-search-bar>
				<button size="mini" :hover-class="'buttons'"
				:style="{ backgroundColor: '#0097ff', border: 'none', color: '#fff', marginRight: '20rpx', height: '36px', lineHeight: '36px' }"
				@click="search">查询</button>
			</view>
			<view class="address_book">
				<view class="address_book_list" style="margin-top: 54px;">
					<view class="address_book_box" v-for="(item,index) in list" :key="index"
						@click="handleDetails(item)">
						<view class="address_book_box_left">
							<image src="../static/done.png" mode=""
								style="width:75rpx;height: 75rpx;border-radius: 12rpx;">
							</image>
						</view>
						<view class="address_book_box_right">
							<view>
								<view>
									{{item.name || ''}}
								</view>
								<view class="fontColor" style="margin: 10rpx 0;">
									ID:{{item.flowId || ''}} {{item.status || ''}}
								</view>
								<view class="fontColor">
									{{item.typeName || ''}}
								</view>
							</view>
							<view class="fontColor">
								<view class="">
									{{item.beginDate?item.beginDate.split(' ')[0]:''}}
								</view>
								<view class="">
									{{item.beginDate&&item.beginDate.split(' ')[1]?item.beginDate.split(' ')[1]:''}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		useList
	} from '@/pages/use/useList';

	const url = {
		list: '/m/flow/listAttend'
	}
	const {
		queryParam,
		list,
		search
	} = useList({
		url: url,
		loadHock: true,
		isOnShow: true,
		queryParam: {
			op: 'search'
		}

	})

	const handleDetails = (item) => {
		uni.navigateTo({
			url: `/application/processShow?record=${JSON.stringify({flowId:item.flowId})}`
		})
	}
</script>
<style lang="scss" scoped>
	.address_book {
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		&_list {
			flex: 1;
			overflow-y: auto;
		}

		&_box {
			display: flex;
			margin-bottom: 20rpx;

			&_left {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
			}

			&_right {
				flex: 1;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid rgb(228, 228, 228);
				font-size: 32rpx;
				padding: 10rpx 0;
			}
		}
	}

	.fontColor {
		color: #8f8f94;
	}

	::v-deep .u-sticky {
		background-color: #fff;
	}
</style>